<script lang="ts" setup>
// #region 引入包, 函数和组件
import { reactive, ref } from "vue"
import { dragonApi } from "@/services" // 轮播图接口
import { useMusicStore } from "@/store"
import type { DragonItem } from "@/services/type"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
// #endregion

// #region // 变量
const icons = ref<DragonItem[]>([])
const path = reactive([
  "src/pages/playlistdetail/playlistdetail",
  "src/pages/fm/fm",
  "src/pages/playlist/playlist",
  "src/pages/toplist/toplist",
  "src/pages/books/books",
  "src/pages/album/album",
  "src/pages/obs/obs",
  "src/pages/newsongs/newsongs",
  "src/pages/bettertime/bettertime",
  "src/pages/collection/collection",
  "src/pages/songhouse/songhouse",
])
// #endregion

// #region // 函数
// 获取首页圆形图标列表数据
const init = async () => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口
    const res = await dragonApi()
    // 接受数据
    icons.value = res.data
    icons.value.forEach((v, i) => (v.url = path[i]))
    // console.log(icons.value)
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
init()
// #endregion
</script>

<template>
  <swiper v-if="icons" :display-multiple-items="5" class="icon_wrap">
    <swiper-item class="icon_item" v-for="item in icons" :key="item.id">
      <view class="icon_flexwrap">
        <image :src="item.iconUrl" mode="aspectFit"></image>
        <view class="icon_text">{{ item.name }}</view>
      </view>
    </swiper-item>
  </swiper>
</template>

<style lang="scss" scoped>
.icon_wrap {
  margin: 20rpx 0;
  height: 128rpx;
  .icon_flexwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      background: $uni-bg-color-wyyRed;
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-bottom: 10rpx;
    }
    view {
      font-size: $uni-font-size-base;
    }
  }
}
</style>
